import CustomHeader from '@/components/CustomHeader';
import Home from '@/screens/HomeScreen';
import My from '@/screens/MyScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

// 定义底部导航栏
const BottomTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        // 显示 header
        headerShown: true,
        // 使用自定义 header
        header: headerProps => {
          return <CustomHeader title={headerProps.route.name} />;
        },
        tabBarStyle: {
          backgroundColor: 'rgba(30,42,77,0.9)',
          borderTopWidth: 0,
          elevation: 10,
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 5,
          },
          shadowOpacity: 0.3,
          shadowRadius: 10,
          height: 70,
          paddingBottom: 10,
          paddingTop: 10,
        },
        tabBarActiveTintColor: '#00EDD4',
        tabBarInactiveTintColor: '#aaa',
        animation: 'shift',
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: '首页',
          tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: 'bold',
          },
        }}
      />
      <Tab.Screen
        name="My"
        component={My}
        options={{
          tabBarLabel: '我的',
          tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: 'bold',
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default BottomTabs;
